  <template>
    <body id="poster">
    <el-form class="login-container" label-position="left"
             label-width="0px">
<!--        <h3 class="login_title">用户注册</h3>-->
        <router-link class="login_title" to="/login">登录</router-link>
        <el-divider direction="vertical"></el-divider>
        <router-link class="login_title" to="/registered">注册</router-link>
        <el-divider>
          <i class="el-icon-mobile-phone"></i>
        </el-divider>
        <el-form-item>
            <el-input type="text" v-model="registeredForm.username"
                      auto-complete="off" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input type="password" v-model="registeredForm.password1"
                      auto-complete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input type="password" v-model="registeredForm.password2"
                      auto-complete="off" placeholder="请确认密码"></el-input>
        </el-form-item>
        <el-form-item style="width: 100%">
            <el-button type="primary" style="width: 100%;background: #4e6e86;border: none" v-on:click="registered">注册</el-button>
        </el-form-item>
    </el-form>
    </body>
</template>

<script>
import axios from "../../axios/axios"
import {ElMessage} from "element-plus";
//0代表此时，用户名验证未通过
export default {
    name: 'Registered',
    components: {
    },
    data () {
        return {
            registeredForm: {
                username: '',
                password1: '',
                password2: '',
            },
            responseResult: []
        }
    },
    methods: {
        registered () {
          if (this.registeredForm.password1===this.registeredForm.password2){
            axios.post('/self/registered', this.registeredForm).then(() => {
              // console.log(res.data.data)
              this.$router.push("/");
            })
          }else {
            ElMessage({
              showClose: true,
              message: '密码输入不一致,请重新输入',
              type: 'error',
            })
          }
        }
    }
}
</script>

<style scoped>
    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 200px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #e5e2e2;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .login_title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #041f2d;
    }
    a{
      text-decoration: none;
    }
    .router-link-exact-active{
      text-decoration: none;
      color: red;
      font-size: 20px;
    }
</style>
